<template>
  <div>
    <el-form :model="dataUpdateForm" :rules="dataUpdateRule" style="max-width: 450px">
      <el-form-item label="昵称" prop="nickname" label-width="100px">
        <el-input v-model="dataUpdateForm.nickname" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="头像url" prop="icon" label-width="100px">
        <el-input v-model="dataUpdateForm.icon" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone" label-width="100px">
        <el-input v-model="dataUpdateForm.phone" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" label-width="100px">
        <el-input v-model="dataUpdateForm.email" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="序号" prop="sort" label-width="100px">
        <el-input v-model="dataUpdateForm.sort" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="角色" label-width="100px">
        <el-select v-model="dataUpdateForm.roleIds" multiple collapse-tags placeholder="请选择">
          <el-option v-for="item in roleTable" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <div style="text-align: center">
        <el-button type="primary" style="margin-right: 150px" @click="">修改</el-button>
        <el-button type="danger" @click="">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "dataUpdate",
  props: {
    id: Number,
  },
  data() {
    return {
      roleTable: [],
      dataUpdateForm: {},
      dataUpdateRule: {
        nickname: [
          {required: true, message: "请输入管理员名称", trigger: "blur"},
          {min: 1, max: 15, message: "名称长度需在1~15个字符之间", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "请输入电话号码", trigger: "blur"},
          {pattern: /^1[3456789]\d{9}$/, message: "请输入正确的电话号码", trigger: "blur"},
        ],
        email: [
          {pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: "请输入正确的邮箱", trigger: "blur"}
        ]
      },
    }
  },
  methods: {
    loadAdminData() {
      let url = "http://localhost:9999/zx-ams/admin/detail";
      let detailData = this.qs.stringify({"id": this.id})
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
      ).post(url, detailData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          jsonResult = jsonResult.data;
          this.dataUpdateForm = jsonResult
          this.dataUpdateForm.roleIds = [];
          let roleIds = this.dataUpdateForm.roleIdString.split(",");
          for (let i = 0; i < roleIds.length; i++) {
            this.dataUpdateForm.roleIds[i] = (parseInt(roleIds[i]));
          }
        }
      })
    },
  },
  mounted() {
    this.loadAdminData()
  },
  watch: {
    alpha(newValue) {
      this.loadAdminData()
    }
  }
}
</script>

<style scoped>

</style>